<template>
  <div class="podcast-div">
    <Podcast />
    <div class="podcast-line"></div>
    <div class="podcast-list" v-loading="loading">
      <MailListComponent :mailList="user.pages.podcast.list" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Podcast from '../components/Podcast.vue';
import { onMounted, ref } from 'vue';
import { userinfo } from '@/stores/counter';
import getResOrPoscat from '@/api/getResOrPoscat';
import MailListComponent from '../components/MailListComponent.vue';

const { getPodcast } = getResOrPoscat();
const user = userinfo();

const loading = ref(false);
const moreLoading = ref(false);

// onMounted(() => {
//   //loading.value = true;
//   getPodcast().then((res) => {
//    // user.pages.podcast.list = res;
//     //loading.value = false;
//   });
// });

// const showMore = () => {
//   moreLoading.value = true;
//   getPodcast(user.pages.podcast.page + 1).then((res) => {
//     user.pages.podcast.list = user.pages.podcast.list.concat(res);
//     user.pages.podcast.page += 1;
//     moreLoading.value = false;
//   });
// };
</script>
<style scoped>
.not-found {
  font-size: 26px;
  color: #000000;
  margin-top: 20px;
}

.podcast-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100px;
}

.podcast-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podcast-line {
  height: 2px;
  width: 80%;
  background-color: #f2ac1c;
  margin-top: 80px;
  margin-bottom: 40px;
}
</style>